<template>
    <van-sticky>
        <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size="18" />
            </template>
        </van-nav-bar>
    </van-sticky>

    <van-cell-group inset>
        <van-cell title="超好吃麻辣烫" is-link />
    </van-cell-group>

    <van-cell-group>
        <van-card num="1" price="10.00" desc="清汤" title="好吃麻辣烫"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
        </van-card>
        <van-card num="1" price="15.00" desc="番茄" title="超值套餐"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
        </van-card>
    </van-cell-group>
        <van-submit-bar price="1500" safe-area-inset-bottom="{{true}}" button-text="付款" @submit="onSubmit" />

    <div style="margin-top:20px;">
        <van-cell-group inset>
            <van-cell title="配送信息" />
            <van-cell title="联系人" value="YiDou" />
            <van-cell title="联系电话" value="18169525561180" />
            <van-cell title="配送地址" value="宁夏大学文萃校区" />
            <van-cell title="创建时间" value="2022-12-5 12：00" />
            <van-cell title="结束时间" value="2022-12-5 12：30" />
        </van-cell-group>
    </div>
</template>

<script setup>
import { Toast } from 'vant';
import { ref, reactive, onBeforeMount } from 'vue';
import {useRouter,useRoute} from 'vue-router'
import http from "@/utils/request.js";
const router = useRouter();
const route = useRoute();
const onClickLeft = () => history.back();
const onSubmit = () => Toast('点击按钮');
const active = ref(2);
// 订单详情列表
const orderDetailList = reactive([])

const getOrderDetailList = function () {
  http.get(
    '/order/orderDetail'
    ).then((res) => {//
    console.log("获取到的订单详情：", res.data);
      orderList.splice(0);//todo 需要将原有的元素清空
        res.data.data.forEach(order => {
          orderList.push(order);
        });
  })
}
//调用获取用户订单列表方法
getOrderDetailList();
</script>